<template>
  <div class="app-container">
    <div class="main">
      <el-row>
        <el-button
          icon="el-icon-back"
          type="success"
          @click="$router.back()"
          plain
          >回到上一层</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-upload"
          plain
          v-hasPermi="['work:photo:add']"
          @click="showUpdateFn"
          >上传视频</el-button
        >

        <el-button
          @click="getForderDetailFn"
          plain
          :disabled="clickedButton == '' ? true : false"
          >……文件夹信息</el-button
        >
      </el-row>
      <div class="folder-list">
        <div
          v-hasPermi="['work:video:getInfo']"
          :class="[
            'folder',
            clickedButton == item.idStr ? 'folder-selected' : '',
          ]"
          v-for="item in videoList"
          :key="item.idStr"
          @click="clickedFn(item)"
          @dblclick="openDrawerFn(item)"
        >
          <ComVideo :src="item.url"></ComVideo>
          <p class="f-title">{{ item.name }}</p>
          <p class="f-num">{{ item.filename }}</p>
        </div>
      </div>
    </div>
    <ShowDetai
      @EventDelete="deleteFn"
      ref="ShowDetai"
      :visible.sync="visible"
    ></ShowDetai>
    <ComUpdate
      @EventGetList="getListFn"
      :dialogVisible.sync="dialogVisible"
      :folderParams="folderParams"
    ></ComUpdate>
  </div>
</template>

<script>
import { getVideoListRemoveAPi } from "@/wss/api/ContentSupervision/videoManagement.js";
import { getConfigGetInfoFolderAPi } from "@/wss/api/ContentSupervision/videoManagement.js";
import ComImgStack from "../../../../components/comImgStack.vue";
import ComVideo from "./comVideo.vue";
import ShowDetai from "./showDetai.vue";
import ComUpdate from "../comUpdate.vue";
export default {
  components: { ComImgStack, ComVideo, ShowDetai, ComUpdate },
  data() {
    return {
      // 上传文件
      dialogVisible: false,
      pageing: { pageSize: "", pageNum: "", folderId: "" },
      //   被点击
      clickedButton: "",
      //   被点击的一项
      clickeditem: {},
      videoList: [],
      visible: false,
    };
  },
  created() {
    this.pageing.folderId = this.$route.query.id;
    // 查询该文件下是否有相同视频使用到的参数
    this.folderParams = {
      id: this.$route.query.id,
      name: this.$route.query.name,
    };
    this.getVideoListFn();
  },
  methods: {
    // 打开el-drawer
    openDrawerFn(item) {
      this.$refs.ShowDetai.getForderDetailFn(item);
      this.visible = true;
    },
    // 重新获取视频列表
    getListFn() {
      this.getVideoListFn();
      this.dialogVisible = false;
    },
    // 显示上传视频
    showUpdateFn() {
      this.dialogVisible = true;
    },
    //   获取视频信息
    getForderDetailFn() {
      this.$refs.ShowDetai.getForderDetailFn(this.clickeditem);
      this.visible = true;
    },
    //   删除视频
    async deleteFn(data) {
      let { msg, code } = await getVideoListRemoveAPi(data);
      if (code == 200) {
        this.visible = false;
        this.$modal.msgSuccess(msg);
        this.getVideoListFn();
      }
    },
    // 获取该文件夹下有多少个视频
    async getVideoListFn() {
      console.log(this.$route, "idid");
      let { data, code } = await getConfigGetInfoFolderAPi({
        folderId: this.$route.query.id,
      });
      console.log(data, "所有视频");
      if (code == 200) {
        this.videoList = data;
        this.videoList.forEach((item) => {
          console.log(item, "iteitme");
          item.url = item.url + item.path + "/" + item.filename;
        });
      }
    },
    // 按钮被点击
    clickedFn(row) {
      this.clickedButton = row.idStr;
      this.clickeditem = row;
    },
  },
};
</script>

<style lang="scss" scoped>
.folder-list {
  display: flex;
  flex-wrap: wrap;
  .folder,
  .folder-selected {
    text-align: center;
    padding: 17px;
    margin: 4px;
    p {
      margin: 0;
    }
    .f-title {
      font-size: 14px;
      font-weight: bold;
      margin: 10px 0;
    }
    .f-num {
      font-size: 12px;
      color: rgb(158, 158, 158);
    }
  }
  .folder:hover,
  .folder-selected {
    border: 2px solid rgb(253, 150, 53);
    margin: 2px;
  }
}
</style>